<script setup>
import { ref } from "vue";
import "./search.css";
import "../trends/newtrends.css";

import { useRouter } from "vue-router";
import axios from "axios";
const router = useRouter();
const value2 = ref("");
const search = () => {
  console.log(value2.value);
  // 跳转到搜索结果页面
  getsearchList();
  // window.location.href = "/searchresult";
  showDate.value = true;
  if (history.value.length > 8) {
    history.value.pop();
  }
  history.value.forEach((item, index) => {
    if (item == value2.value) {
      history.value.splice(index, 1);
    }
  });
  history.value.unshift(value2.value);
};
const show = ref(false);
const history = ref(["晨跑", "校园夜跑"]);
const deleteHistory = (index) => {
  history.value.splice(index, 1);
};
const deleteAllHistory = () => {
  history.value = [];
  show.value = false;
};
const selsectHistory = (item) => {
  value2.value = item;
  // window.location.href = "/searchresult";
};
const showDate = ref(false);

const searchlist = ref([]);
const getsearchList = async () => {
  let res = await axios.get("http://8.130.46.189:3000/ljb/searchlist", {
    params: {
      keyword: value2.value,
    },
  });
  searchlist.value = res.data;
  console.log(searchlist.value);
};
</script>
<template>
  <div class="searchall">
    <div class="search">
      <div class="top">
        <van-icon
          name="arrow-left"
          style="
            float: left;
            width: 20px;
            height: 40px;
            font-size: 23px;
            line-height: 40px;
            margin-left: -5px;
          "
          onclick="window.history.back()"
        />
        <van-field
          v-model="value2"
          clearable
          left-icon="search"
          placeholder="搜索动态关键词"
          class="van-field"
          @clear="showDate = false"
        />
        <button @click="search()">搜索</button>
      </div>
      <div v-if="!showDate">
        <div class="center">
          <span>历史搜索</span>
          <!-- 删除按钮 -->
          <van-icon
            name="delete-o"
            style="float: right"
            @click="show = !show"
            v-if="!show"
          />

          <span style="float: right" v-show="show" @click="show = !show">
            完成</span
          ><span style="float: right" v-show="show" @click="deleteAllHistory"
            >全部删除|
          </span>
          <div class="center-button">
            <button
              v-for="(item, index) in history"
              :key="index"
              @click="selsectHistory(item)"
            >
              {{ item }}
              <span
                style="color: black; margin-left: 10px"
                v-show="show"
                @click="deleteHistory(index)"
                >X</span
              >
            </button>
          </div>
        </div>
        <div class="bottom">
          <span>热门推荐</span>
          <br />
          <button><van-icon name="fire" color="red" />校园夜跑</button>
          <button><van-icon name="fire" color="red" />江城工程学院</button>
          <button><van-icon name="fire" color="red" />每日打卡</button>
        </div>
      </div>
      <div v-else>
        <div
          class="newtrends-content"
          v-for="item in searchlist"
          :key="item.id"
        >
          <img src="../../../imgs/trends1.png" class="newtrends-img" />

          <div className="newtrends-content-wenan">
            <span>{{ item.title }}</span>
          </div>
          <!-- 最多18个字 -->
          <div class="newtrends-content-toxiang">
            <img :src="item.profileImage" class="newtrends-toxiang" />
            <span>{{ item.name }}</span>

            <img
              src="../../../imgs/点赞.png"
              class="newtrends-content-toxiang-img"
            />
            <span style="float: right">{{ item.likes }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
